蛋疼的我又回来了，因为心里感觉总是有块石头没落下来，过滤选择器是我比较喜欢用，同时了解也不是很清楚的选择器，在项目里实际使用的时候总出现一些莫名其妙的问题，我知道这是对过滤选择器的知识了解的不够多导致的，这也促使我今晚上一定要写点东西出来，能写出来心里就明白了，就算是写不完也没事，反正明天照样不去公司，有时间继续补。
在上上篇文章里面，我们讨论了 jQuery 四大匹配选择器中的前两个，基本选择器与层次选择器，现在我们来讨论后两个，过滤选择器与表单选择器。
过滤选择器
有时候我们会有一些比较特殊的需求，例如，我们使用 $(“#test p”) 选择到了 id 为 test 的元素的后代元素中的 p 元素，但我们想给选择到的第一个 p 元素设置格外的 CSS 样式，这就要求我们从已经选择到的众多 p 元素中筛选出符合条件的第一个 p 元素，如果我们仍然只使用基本选择器与层次选择器，那无疑会给工作带来一些困难。幸运的是，jQuery 的开发者们早就想到了这个问题，并且给出了相应的解决方案，这就是过滤选择器。
过滤选择器可以通过特定的过滤规则来筛选出所需的 DOM 元素，它的语法类似于 CSS 中的伪类选择器，以冒号作为开头。过滤选择器根据其过滤规则的种类，又可以分为基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器以及表单属性过滤选择器，下面我们分别对这数种过滤选择器展开讨论。
基本过滤选择器
基本过滤选择器也可以称之为简单过滤选择器，它是过滤选择器中使用最为广泛的一种，它主要用来选择首、尾、指定索引、奇数或偶数位的元素等等。具体包含有如下几种过滤规则。
:first
从找到的众多元素中筛选出第一个元素，例如上面所要求的，从找到的众多的 p 元素中筛选出第一个 p 元素，便可以通过 $(“p:first”) 实现。
:last
从找到的众多元素中筛选出最后一个元素，效果与:first 恰好相反。
:not(selector)
从找到的众多元素中去除所有与给定选择器相匹配的元素，其中 selector 为一个匹配选择器，可以是 jQuery 所支持的各种匹配选择器的自由组合，可以简单也可以复杂。举个例子：1
2
3
4
5
6
7
8<div>
<p>1</p>
<p>2</p>
<span>3</span>
<button>4</button>
<p>5</p>
<p>6</p>
</div>
我们使用 $(“div>”)，则会选择 div 元素的所有子元素，若我们想要排除 button 元素，则可以使用 $(“div>:not(button)”)，若还想排除 span 元素，则可以使用 $(“div>:not(button, span)”)，若想排除所有的 p 元素，除了可以写成 $(“div>:not(p)”) 外，也可以写成 $(“div>:not(div>p)”)，甚至还可以写成 $(“div>:not(div>:not(div>:not(p)))”)，三者的效果都是相同的（不过应该不会有人闲的蛋疼到写第二种和第三种吧……）！这也再次证明了 jQuery 的灵活性。
:odd
从找到的众多元素中筛选出所有索引值为奇数的元素，这里需要注意两点，一是索引值是从 0 开始计数的；二是需要的索引值不能使用 index() 函数来得到；这是因为 index() 函数获取的元素的索引值是元素在实际的 HTML 文档里面的排序值，不是在众多被选择器选择出来的元素里面的排序值，两者不是一回事。
:even
作用与:odd 恰好相反，从找到的众多元素中筛选出所有索引值为偶数的元素，使用时同样需要注意以上两点。:odd 与:even 在显示表格时比较有用，比如要求相邻数据行的颜色不同，那么就可以使用这两个筛选器来对奇数行数据和偶数行数据赋予不同的背景颜色。
:eq(index)
从找到的众多元素中筛选出索引值为 index 的元素，使用时同样需要注意以上两点。
:gt(index)
从找到的众多元素中筛选出索引值大于 index 的元素，使用时同样需要注意以上两点，例如，想从选择器选择到的 10 个 p 元素中筛选出后面 7 个，就可以使用 $(“p:gt(2)”)。
:lt(index)
作用与上面的:gt 恰好相反，从找到的众多元素中筛选出索引值小于 index 的元素，使用时同样需要注意以上两点。
:header
从找到的众多元素中筛选出 h1、h2、h3 这类标题元素，没用过不敢多说话。
:animated
从找到的众多元素中筛选出正在执行动画效果的元素，同样没用过不敢多说话。
内容过滤选择器
内容过滤选择器可以根据 HTML 文本内容进行过滤选择，具体包含有如下几种规则。
:contains(text)
从找到的众多元素中筛选出包含给定文本 text 的元素，例如，想从选择器选择到的所有 div 元素中筛选出包含文本 test 的 div 元素（类似这种<div>1234test5678</div>），就可以使用 $(“div:contains(‘test’)”)，需要注意单双引号的交错使用，防止错误匹配。
:empty
从找到的众多元素中筛选出不包含子元素或者文本为空的元素，就类似这种<div></div>。
:has(selector)
从找到的众多元素中筛选出包含有选择器 selector 匹配的元素的元素，例如，想从选择器选择到的所有 div 元素中筛选出包含有 p 子元素的元素，就可以使用 $(“div:has(p)”)。需要注意的是，:has 与:not 并不是恰好相反的，:not 检查的是元素本身，例如这个元素是不是 button 元素，而:has 关注元素的子元素是不是符合条件，例如这个元素有没有一个 button 子元素。
:parent
从找到的众多元素中筛选出包含有子元素或者文本不为空的元素，作用与:empty 恰好相反。
可见性过滤器
可见性过滤器根据元素是否可见来筛选元素，它主要是 hidden 查找隐藏的元素和 visible 查找可见的元素，具体包含有如下两种规则。
:hidden
从找到的众多元素中筛选出不可见的元素，例如从找到的众多 tr 元素中筛选出不可见的 tr 元素，就可以使用 $(“tr:hidden”)。
注意：jQuery 有两个内置函数，show() 与 hide()，它们的作用分别是显示元素与隐藏元素。我们知道元素的隐藏有许多方法，例如设置其 css 属性 visibility，设置为 hidden 则元素不可见，设置为 visible 则元素可见，或者设置 opacity（透明度）属性，设置为 0 则元素不可见（完全透明），设置为 1 则元素可见，与此同时还可以设置 display 属性，设置为 none 则元素不可见，设置为其他类型，如 inline 或者 block 则元素可见，其实这些方式是有区别的，使用 display 可以使元素完全隐藏，而使用 visibility 或 opacity，虽然元素本身看不到了，但是会在元素本来的位置留下一片空白，大小与元素的大小相同，也就是说这两种方式仅仅是使得元素不可见但还会保留元素在文档中的位置。需要明确的是，使用 jQuery 的内置函数 show() 和 hide()，其效果与使用 display 的效果是相同的。
:visible
从找到的众多元素中筛选出可见的元素，作用恰好与:hidden 相反。
属性过滤器
属性过滤选择器是 jQuery 中非常有用的一种选择器，它可以基于 HTML 元素的属性来筛选特定的元素。另外，除了可以根据不同的属性来筛选元素，还可以根据不同的属性值来筛选元素，具体包含有如下几种规则。
[attribute]
从找到的众多元素中筛选出包含给定属性的元素，例如，想从找到的众多 div 元素中筛选出包含有 id 属性的元素，就可以使用 $(“div[id]”)。
[attribute=value]
从找到的众多元素中筛选出属性 attribute 是给定值 value 的元素，例如，想从找到的众多 p 元素中筛选出 name 属性为 news 的元素，就可以使用 $(“p[name=news]”)。
[attribute!=value]
从找到的众多元素中筛选出属性 attribute 不是给定值 value 的元素，作用与上一个恰好相反。
[attribute^=value]
从找到的众多元素中筛选出属性 attribute 是以给定值 value 开头的元素，例如，想从找到的众多 p 元素中筛选出 name 属性以 news 开头的元素，比如<p name=’news1’></p>、<p name=’news2’></p>等，就可以使用 $(“p[name^=news]”)。
[attribute$=value]
从找到的众多元素中筛选出属性 attribute 是以给定值 value 结尾的元素，作用与上一个恰好相反。
[attribute*=value]
从找到的众多元素中筛选出属性 attribute 包含给定值 value 的元素，使用效果与上面的大同小异。
子元素过滤选择器
这个过滤器是根据父元素中的某些过滤规则来选择子元素，例如可以选择父元素的第一个子元素，或者是父元素中特定位置的子元素，具体包含有如下几种规则。
:nth-child(value)
从当前父元素所包含的众多子元素中筛选出特定位置上的子元素。这个过滤器的用法较为灵活，value 的值可以为 index，也就是父元素下第 index+1 个子元素，例如，想筛选出父元素 div 下第 3 个 p 子元素，就可以使用 $(“div p:nth-child(3)”)，注意你不可以使用 $(“div:nth-child(3)”)，因为:nth-child() 是子元素过滤选择器，这样写的意思是选择第 3 个 div 元素，不是选择 div 元素下的第 3 个子元素，一定要在需要筛选的子元素上应用:nth-child()，同时你不可以写成 $(“div:nth-child(2)”)，因为:nth-child() 是从 1 开始的；其次，value 的值还可以为 even 或者 odd，对应的作用分别是选择索引值为奇数或偶数的子元素，注意此处与上面基本过滤选择器里面的:odd 和:even 之间的差别，:odd 和:even 直接筛选选择器选择到的元素，而此处筛选的是选择器选择到的元素的子元素，两者是不一样的，不要混淆；除此之外，value 还可以是表达式，例如:nth-child(3n+1)，其作用就是筛选出父元素下索引值为 1、4、7……的子元素，这里的 n 从 0 开始自增，如果计算结果小于 1 则忽略，例如:nth-child(3n-7)，则使计算结果小于 1 的 n（即 0、1、2）都会被忽略，之后从 n 等于 3 开始，选择索引值为 2、5、8……的子元素。
:first-child
从当前父元素所包含的众多子元素中筛选出第一个子元素，等同于上面的:nth-child(1)。
:last-child
从当前父元素所包含的众多子元素中筛选出最后一个子元素，与:first-child 恰好相反。
:only-child
如果当前父元素只有一个子元素，那么该子元素会被选中。举个例子1
2
3
4
5
6
7<div id='1'>
<p>1</p>
<p>2</p>
</div>
<div id='2'>
<p>3</p>
</div>
如果使用 $(‘div >’)，则所有的 p 元素都会被选中，若使用 $(‘div > :only-child’)，则只有 id 为 2 的 div 元素中的 p 元素被选中。
表单对象属性过滤器
这种类型的过滤器可以根据表单中某对象的属性特征来获取表单元素，比如表单元素的 enabled、disabled、selected 和 checked 属性，个人感觉比较有用，在表单值获取与验证的时候，使用这种类型的过滤器是相对方便的，具体包含有如下几种规则。
:enabled
从找到的众多表单元素中筛选出所有可用元素，例如，查找所有可用的 input 元素，就可以使用 $(‘input:enabled’)。
:disabled
从找到的众多表单元素中筛选出所有不可用元素，作用与:enabled 恰好相反。
:checked
从找到的众多表单元素中筛选出所有被选中的元素，该过滤器只可以应用在复选框、单选按钮等，注意不包括 select 中的 option。
:selected
这个过滤器只有一个作用，就是筛选出 select 中被选中的 option，作为上面:checked 功能的补充。
表单选择器
表单选择器提供了灵活的方法来选择表单中的元素，其功能比表单对象属性过滤器更加强大，具体包含有如下几种规则。
:input
选择所有的 input、textarea、select 和 button 元素，例如，想选中表单中的以上所有元素，就可以使用 $(‘form :input’)。
:text
选择所有的文本框，例如<input type=’text’>。
:password
选择所有的密码框，例如<input type=’password’>。
:radio
选择所有的单选框，例如<input type=’radio’ name=’性别’>。
:checkbox
选择所有的复选框，例如<input type=’checkbox’>。
:submit
选择所有的提交按钮，例如<input type=’submit’>。
:image
选择所有的图像域，这个没用过不敢多说话。
:reset
选择所有的重置按钮，例如<input type=’reset’>。
:button
选择所有的按钮，这个就不用说了吧。
:file
选择所有的文件域，这个同样没用过不敢多说话。
好啦，到现在为止终于把 jQuery 的所有匹配选择器都介绍完啦，真是够累的，不过这拖得时间也确实够长的了，赶上最近几天实验室没什么事，就赶紧把这件事给了结了，心里也就没什么石头悬着了，总的来说，自己感觉写的还可以，不过其中的问题肯定是在所难免的，希望发现的童鞋跟我说一下，或者在评论里面留言，我看到了以后一定会及时改正的，好啦，就写到这里吧~~~